import {
  ForwardedRef,
  forwardRef,
  memo,
  MouseEventHandler,
  useMemo,
} from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Control, Controller, useWatch } from 'react-hook-form';
import {
  Button,
  Col,
  Form,
  FormItemProps,
  Image,
  Input,
  InputProps,
  InputRef,
  Row,
} from 'antd';
import { PasswordProps } from 'antd/es/input';
import QueueAnim from 'rc-queue-anim';
import { useCaptchaApi } from '@/hooks/api/useAuthApi';

const RxCaptchaInput = forwardRef<
  any,
  PropsWithChildren<
    {
      name: string;
      control: Control<any>;
      data: string;
      onClick: MouseEventHandler;
      item?: FormItemProps;
    } & Partial<InputProps> &
      Partial<InputRef> &
      Partial<PasswordProps>
  >
>(({ name,data,onClick, control, item, ...rest }, ref) => {
  const animateConfig = [{ opacity: [1, 0], translateY: [0, 5] }];
  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState }) => (
        <div ref={ref}>
          <Form.Item {...item}>
            <Row justify={'space-between'}>
              <Col span={13} className={'h-[32px]'}>
                <Input {...field} {...rest} />
              </Col>
              <Col span={9} className={'h-[32px]'}>
                <Image
                  preview={false}
                  width={'100%'}
                  height={'32px'}
                  src={data}
                  placeholder={true}
                  onClick={onClick}
                  fallback={
                    'http://139.159.238.29:8090/captcha?time=' + Date.now()
                  }
                  className={'object-full cursor-pointer rounded'}
                />
              </Col>
            </Row>
            <QueueAnim animConfig={animateConfig}>
              {fieldState.error && (
                <p
                  className={'absolute leading-6 text-xs text-red-400'}
                  key={fieldState.error.message}
                >
                  {fieldState.error?.message}
                </p>
              )}
            </QueueAnim>
          </Form.Item>
        </div>
      )}
    />
  );
});

export default memo(RxCaptchaInput);
